import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: '',
    content: '',
  }
  handleInput = (e) => {
    // 把输入的内容给 state 中 username，username 变化，视图自然就变了
    // console.log(e.target.value)
    // this.state.username = e.target.value
    this.setState({
      username: e.target.value,
    })
  }
  handleTextarea = (e) => {
    this.setState({
      content: e.target.value,
    })
  }
  render() {
    return (
      <div>
        <ul>
          <li>
            <label htmlFor='username'>用户名</label>
            <input
              type='text'
              id='username'
              value={this.state.username}
              onChange={this.handleInput}
            />
          </li>
          <li>
            <label htmlFor='content'>其他信息</label>
            <textarea
              id='content'
              value={this.state.content}
              onChange={this.handleTextarea}
            ></textarea>
          </li>
        </ul>
      </div>
    )
  }
}
